<template>
  <section class="app-container">
    <van-swipe @change="onChange">
      <van-swipe-item
        v-for="(image, index) in shopData.gallery"
        :key="index"
        style="position: relative"
      >
        <div
          image
          :style="{ backgroundImage: `url(${image})` }"
          style="width: 100%; padding-bottom: 100%; background-size: 100% 100%"
        ></div>
      </van-swipe-item>
      <div class="custom-indicator" slot="indicator">
        {{ current + 1 }}/{{ shopData.gallery.length }}
      </div>
    </van-swipe>
    <!--原料价格-->
    <article class="raw-price">
      <div>
        <span style="font-size: 20px"
          >￥<span>{{ relatpice }}</span></span
        >
      </div>
      <nav>
        <a v-for="(item, i) in shopData.goodLable" :key="i"> {{ item }}</a>
      </nav>
    </article>
    <!--原料名称-->
    <article class="raw-name">
      <span v-if="shopData.name" style="font-size: 16px">{{
        shopData.name
      }}</span>
    </article>

    <!--原料描述-->
    <article class="raw-descripition">
      <span v-if="shopData.brief"
        >{{ shopData.brief.substring(0, 26) }}
        {{ strlen(shopData.brief) > 26 ? '...' : '' }}</span
      >
    </article>
    <p style="width: 100%; background: #eeeeee; height: 10px; margin: 0"></p>
    <!-- 到付 -->
    <div class="item_cell_group" style="margin-bottom: 0">
      <van-cell-group>
        <van-cell
          title="选择"
          isLink
          value="请选择商品规格"
          @click.native="skuClick"
        />
        <!-- <van-cell title="参数" isLink @click.native="propsPopup = true" /> -->
        <van-cell title="运费" value="到付" />
      </van-cell-group>
      <!-- <van-sku
        :sku="sku"
        :hide-stock="false"
        :goods="skuGoods"
        :close-on-click-overlay="true"
        :quota="quota"
        :hide-quota-text="false"
      > -->
      <!-- 自定义 sku-header-price -->
      <!-- <template #sku-header-price v-if="memberObj.memberPrice > 0 && isOpen">
          <div style="display: flex">
            <span class="item_price"></span> -->
      <!-- <div class="cont5" v-if="memberObj.memberPrice > 0">
              <span>{{ (memberObj.memberPrice * 100) | yuan }}</span>
              <img src="@/assets/images/member_price.png" alt />
            </div> -->
      <!-- </div>
        </template> -->
      <!-- </van-sku> -->
      <!-- <van-popup v-model="propsPopup" position="bottom">
        <popup-props :propsStr="props_str"></popup-props>
      </van-popup> -->
    </div>
    <p style="width: 100%; background: #eeeeee; height: 10px; margin: 0"></p>
    <!--原料供应商-->
    <article class="raw-provide">
      <div class="top">
        <div
          class="left"
          :style="{
            backgroundImage: `url(${
              shopInfo.shopLogo ? shopInfo.shopLogo : logo_default
            })`,
          }"
        ></div>
        <ul class="right" style="width: 70%">
          <li
            class="right-top"
            style="display: flex; justify-content: space-between; width: 100%"
          >
            <b
              style="
                display: inline-block;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                max-width: 52%;
              "
            >
              {{ shopInfo.shopName }}</b
            >
            <span style="padding-right: 26px; color: #969799"
              >商品数量： {{ shopInfo.goodSize }}</span
            >
          </li>
          <li class="right-bottom" style="display: flex">
            <p
              @click="call"
              style="
                font-size: 12px;
                border: 1px solid black;
                padding: 3px 6px;
                border-radius: 16px;
              "
            >
              电话联系 &nbsp;
            </p>
            <p
              style="
                font-size: 12px;
                margin-left: 15px;
                border: 1px solid black;
                padding: 3px 6px;
                border-radius: 16px;
              "
              @click="
                redirectTo(`/raw/shop-material?shopId=${shopData.merchantId}`)
              "
            >
              全部商品
            </p>
            <!-- <p
              style="
                font-size: 12px;
                margin-left: 15px;
                border: 1px solid black;
                padding: 3px 6px;
                border-radius: 16px;
              "
              @click="openBaiApp()"
            >
              门店导航
            </p> -->
          </li>
        </ul>
      </div>
    </article>
    <!--产品详情-->
    <article class="raw-detail">
      <!-- <div @click="handleShowGallery">
        <span>产品详情</span>
      </div> -->
      <div
        style="
          width: 100%;
          height: 44px;
          line-height: 44px;
          text-align: center;
          display: flex;
          justify-content: center;
          background-color: #f2f2f2;
        "
        @click="handleShowGallery"
      >
        <span
          style="
            height: 0px;
            border: 0.6px solid rgb(208, 208, 208);
            display: inline-block;
            margin: 21.7px 5px;
            width: 70px;
          "
        ></span
        ><span>以下内容为产品详情</span
        ><span
          style="
            height: 0px;
            border: 0.6px solid rgb(208, 208, 208);
            display: inline-block;
            margin: 21.7px 5px;
            width: 70px;
          "
        ></span>
      </div>
      <div class="fadetai">
        <div
          class="detailp"
          v-html="shopData.detail"
          v-if="shopData.detail"
        ></div>
        <!-- <p style="padding: 0 12px">
          <van-image :src="item" />
        </p> -->
      </div>
    </article>
    <!--购物车-->
    <footer>
      <van-goods-action>
        <van-goods-action-icon
          icon="cart"
          text="购物车"
          :info="cartInfo > 0 ? cartInfo : ''"
          @click="toCart"
        />
        <!-- <van-goods-action-icon icon="star-o" text="收藏" /> -->
        <van-goods-action-icon
          icon="shop"
          text="店铺"
          @click="
            redirectTo(`/raw/shop-material?shopId=${shopData.merchantId}`)
          "
        />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="skuClick"
        />
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="skuClick"
        />
      </van-goods-action>
    </footer>
    <!-- 购买卡 -->
    <div
      v-show="showSku"
      style="
        width: 100%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        position: fixed;
        bottom: 0;
        z-index: 1001;
        background: white;
      "
    >
      <!-- 头部 -->
      <div
        style="display: flex; width: auto; margin-left: 20px; margin-top: 10px"
      >
        <img
          :src="logo"
          alt=""
          width="96px"
          height="96px"
          style="border-radius: 4px"
        />
        <div style="margin-left: 10px">
          <p style="color: #ff0000; font-size: 17px">
            <span style="font-size: 12px">￥</span> <b>{{ queqian }}</b>
          </p>
          <p style="color: #b3b4b5; margin-bottom: 5px">
            库存 <span style=""> {{ queliang }}</span> 件
          </p>
          <p style="color: #b3b4b5; margin: 0">
            已选择 <span>{{ guiname }}</span>
          </p>
        </div>
      </div>
      <!-- 中间 -->
      <div>
        <ul>
          <li style="padding: 0 25px; font-size: 15px; padding-bottom: 10px">
            <div
              v-for="(item, index) in guiarr"
              :key="index"
              style="margin-top: 0; border-radius: 4px; padding: 3px"
            >
              <p>
                <span>{{ item.name }}</span>
              </p>

              <ul style="display: flex; flex-wrap: wrap">
                <li
                  v-for="(ement, index) in item.valueList"
                  :key="index"
                  style="display: flex; padding: 6px; border-radius: 4px"
                  @click="chostab(ement, index)"
                  :class="index == mosu ? 'zqan' : 'fozan'"
                >
                  <img
                    :src="ement.picUrl ? ement.picUrl : logo_default"
                    alt=""
                    width="20px"
                    height="20px"
                    style="margin: 0 5px"
                  />
                  <p style="margin: 0; padding-right: 2px">
                    {{ ement.value }}
                  </p>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div
        style="
          display: flex;
          padding: 10px 21px;
          justify-content: space-between;
        "
      >
        <div><span>购买数量</span></div>
        <!-- 计数器 -->
        <div>
          <button
            type="button"
            class="deft"
            style="padding: 1px 7px"
            @click="defshu"
          ></button>
          <input
            type="tel"
            role="spinbutton"
            inputmode="numeric"
            aria-valuemax="100"
            readonly="readonly"
            aria-valuemin="1"
            aria-valuenow="1"
            class="stepper"
            v-model="qishu"
          />
          <button type="button" @click="addshu" class="addright"></button>
        </div>
      </div>

      <!-- 底部 -->
      <div
        style="display: flex; padding: 0 21px; justify-content: space-between"
      >
        <p
          style="width: 50%; text-align: center"
          class="tocard"
          @click="addCart()"
        >
          加入购物车
        </p>
        <p
          style="width: 50%; text-align: center"
          class="buynow"
          @click="buyGoods()"
        >
          立即购买
        </p>
      </div>
    </div>
    <div
      v-show="showSku"
      style="
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        z-index: 1000;
      "
      @click="skuck()"
    ></div>
  </section>
</template>
<script>
import {
  authInfo,
  getRawGoodDetail,
  getRawGoodProductList,
  rawAddCart,
  getRawCartList,
  getRawShopInfo,
  cartAdd,
  getlianInfo,
  cartFastAdd,
  cartGoodsCount,
  updateDuration,
} from '@/api/api';
import {
  Swipe,
  SwipeItem,
  GoodsAction,
  GoodsActionButton,
  GoodsActionIcon,
  Popup,
  Toast,
  Divider,
  Dialog,
  Icon,
  Image,
} from 'vant';
import logo_default from '@/assets/images/logo.jpg';
import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
import wx from 'weixin-js-sdk';
export default {
  name: '',
  props: {},
  data() {
    return {
      guiarr: [],
      statu: '',
      cartInfo: 0,
      quegui: '',
      queqian: '',
      queliang: '',
      mosu: 0,
      guiname: '',
      logo: '',
      qishu: 1,
      addclick: 'van-sku-row__item--disabled',
      logo_default: logo_default,
      initialSku: {},
      skuGoods: {
        // 商品标题
        title: '',
        // 默认商品 sku 缩略图
        picture: '',
      },
      relatpice: '',
      current: 0,
      gallerysize: 1,
      id: 0,
      shopId: 0,
      shopData: {
        gallery: [],
      },
      images: [
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/bjhh0quin5hi86u8rmsw.png',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/ogu2cb5djqu7b5fz55n7.jpg',
      ],
      showSku: false,
      refd: '',

      goods: {
        title: '',
        picture: '',
      },
      goodsId: -1,
      quota: 0, //限购数量 0表示不限购
      quotaUsed: 0, //购买过的数量
      //购物车中商品数量
      badge: undefined,
      cartGoods: [],
      shopInfo: {},
      //定时器
      setTimeout: null,
      gallery: [],
      //是否展示详情图片
      showGallery: false,
      addid: '',
      link: '',
      userId: '',
      propsPopup: false,
      positioid: '',
      specificationId: '',
    };
  },
  watch: {},
  created() {
    this.id = this.$route.query.id || -1;
    this.init();
    authInfo().then((res) => {
      this.statu = res.data.data.status;
      this.positioid = res.data.data.positionId;
      this.userId = res.data.data.userId;
    });
    cartGoodsCount().then((res) => {
      this.cartInfo = res.data.data;
    });

    this.link =
      process.env.VUE_APP_BASE_API +
      'wechat/static/html/redirect.html?app3Redirect=' +
      encodeURIComponent(window.location.href); // 分享链接
    let str = window.location.href,
      num = str.indexOf('#'); //取得整个地址栏
    this.link = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ]
    // pop默认第一个
  },
  beforeRouteLeave(to, from, next) {
    // 仅适用于本页面不作为H5着陆页的情况
    if (this.showSku) {
      //this.$store.commit('SET_SKU_SHOW', false)
      this.showSku = false;
      next(false);
    } else if (this.propsPopup) {
      this.propsPopup = false;
      next(false);
    } else {
      updateDuration({
        goodsId: this.$route.query.id,
        url: this.link,
      }).then((res) => {});
      next();
    }
  },
  computed: {},
  methods: {
    skuck() {
      this.showSku = false;
    },
    // chtab(img, name, id) {
    //   if (id == 1) {
    //     this.chostab(img, name, id);
    //   }
    // },
    chostab(row, id) {
      this.mosu = id;
      this.queqian = this.quegui[id].price;
      this.queliang = this.quegui[id].number;
      this.addid = this.quegui[id].id;
      this.specificationId = row.id;
      this.guiname = row.value;
      if (row.picUrl == undefined || row.picUrl == '') {
        this.logo = this.logo_default;
        return;
      }
      this.logo = row.picUrl;
    },
    // 计数器
    addshu(num) {
      if (this.qishu >= this.queliang) {
        Toast('数量已超出库存量！');
        return;
      }
      this.qishu = this.qishu + 1;
    },
    defshu() {
      if (this.qishu == 1) {
        Toast('商品数不能为零');
        return;
      }
      this.qishu = this.qishu - 1;
    },
    // 页面介绍接口
    init() {
      getRawGoodDetail({
        id: this.id,
      })
        .then((res) => {
          this.shopData = res.data.data;
          this.goodsId = res.data.data['id'] || -1;
          // this.goods.picture = res.data.data['picUrl'] || '';
          // this.goods.title = res.data.data['name'] || '';
          this.shopId = res.data.data.merchantId || 0;
          this.gallery = res.data.data['gallery'] || [];
          this.goods = {
            title: res.data.data['name'] || '',
            picture: res.data.data['picUrl'] || '',
          };
          let str = window.location.href,
            num = str.indexOf('#'); //取得整个地址栏
          let link = str.substr(num + 1);
          this.$wxShare({
            title: this.shopData.name,
            desc: this.shopData.brief,
            link: link,
            imgUrl: this.shopData.gallery[0],
          });
        })
        .then(() => {
          this.getShopInfo();
        })

        .then(() => {
          //产品规格详情
          getRawGoodProductList({
            id: this.id,
          }).then((respone) => {
            //封装商品规格 tree list
            const productList = respone.data.data.specificationList;
            const specificationList = respone.data.data.productList;
            this.quegui = specificationList;
            let info = respone.data.data.info;
            this.relatpice = info.retailPrice;
            // 默认pop第一个
            this.queqian = this.quegui[0].price;
            this.queliang = this.quegui[0].number;
            this.addid = this.quegui[0].id;
            respone.data.data.specificationList.forEach((item) => {
              this.guiarr.push(item);
              // 默认pop第一个
              this.guiname = this.guiarr[0].valueList[0].value;
              let logo = this.guiarr[0].valueList[0].picUrl;
              if (this.logo == '' || this.logo == null) {
                this.logo =
                  info.gallery[0] == null ? logo_default : info.gallery[0];
              } else {
                this.logo = logo;
              }
              this.specificationId = this.guiarr[0].valueList[0].id;
            });
          });
        })
        .then(() => {
          this.getCartGoods();
        });
    },
    onChange(index) {
      this.current = index;
    },
    strlen(str) {
      var len = 0;

      for (var i = 0; i < str.length; i++) {
        var c = str.charCodeAt(i);
        //单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
          len++;
        } else {
          len += 2;
        }
      }
      return len;
    },
    skuClick() {
      authInfo().then((res) => {
        let status = res.data.data.status;
        if (status == 0) {
          //未认证
          Toast('请先验证手机号!');
          this.$router.push(`/check`);
          return;
        } else {
          this.showSku = !this.showSku;
        }
      });
    },
    redirectTo(link) {
      this.$router.push({
        path: link,
      });
    },
    call() {
      if (this.statu == 0) {
        //未认证
        Toast('请先验证手机号!');
        this.$router.push(`/check`);
        return;
      }
      if (!this.shopInfo.tel || this.statu == 0) {
        return;
      }
      window.location.href = 'tel:' + this.shopInfo.tel;
    },
    //添加购物车
    addCart(data) {
      //a 进行购物车中该种商品数量判定 超出数量限制回退 =>暂时先不做 因为该功能针对于会员  会员逻辑暂时没有做
      //b 进行商品数量判定 购物车中该商品数量(添加以后的数量)<=商品总数
      let that = this;
      let params = {
        goodsId: this.goodsId,
        number: this.qishu,
        productId: this.addid,
        shareUserId: this.id,
        specificationId: this.specificationId,
        // price: data.selectedSkuComb.price / 100,
        // goodsSn: this.data.id,
        // goodsName: this.data.name,
        //specifications: this.getSpecifications(data.selectedSkuComb.s1),
        // sellAmout: data.selectedSkuComb.price / 100,
      };

      cartAdd(params)
        .then(() => {
          this.cartInfo = this.cartInfo + this.qishu;
          this.$toast({
            message: '已添加至购物车',
            duration: 1500,
          });
          that.showSku = false;
        })
        .then(() => {
          //重新获取购物车渲染数据
          this.getCartGoods();
        })
        .catch((res) => {
          Toast(res.data.errmsg);
        });
    },

    //获取购物车列表数据
    getCartGoods() {},
    toCart() {
      this.$router.push({
        path: '/order',
      });
    },
    // 微信内置导航接口
    openBaiApp() {
      if (this.statu == 0) {
        //未认证
        Toast('请先验证手机号!');
        this.$router.push(`/check`);
        return;
      }
      getRawShopInfo({
        shopId: this.shopId,
      }).then((res) => {
        this.shopInfo = res.data.data;
        let shopinfer = res.data.data;

        wx.openLocation({
          latitude: parseFloat(shopinfer.shopLat),
          // 纬度，浮点数，范围为90 ~ -90
          longitude: parseFloat(shopinfer.shopLng),
          // // 经度，浮点数，范围为180 ~ -180。
          name: shopinfer.shopName,
          address: shopinfer.shopAddress,
          scale: 10,
          infoUrl: '',
          success: (res) => {},
          fail: (res) => {
            console.log(res);
          },
        });
      });
    },
    //获取商铺信息
    getShopInfo() {
      if (
        this.positioid == 6001 ||
        this.positioid == 2001 ||
        this.positioid == 6004
      ) {
        getlianInfo({ userId: this.userId }).then((res) => {
          this.shopInfo = res.data.data;
        });
      } else {
        getRawShopInfo({
          shopId: this.shopId,
        }).then((res) => {
          this.shopInfo = res.data.data;
        });
      }
    },
    //立即购买
    buyGoods(data) {
      //请求后端数据返回购物车号
      let that = this;
      let para = {
        goodsId: this.goodsId,
        number: this.qishu,
        productId: this.addid,
        shareUserId: this.id,
        specificationId: this.specificationId,
        // price: data.selectedSkuComb.price / 100,
        // goodsSn: this.data.id,
        // goodsName: this.data.name,
        //specifications: this.getSpecifications(data.selectedSkuComb.s1),
        // sellAmout: data.selectedSkuComb.price / 100,
      };

      if (this.queliang == 0) {
        Toast('暂无库存！');
        return;
      }
      cartFastAdd(para)
        .then((res) => {
          let rawCartId = res.data.data;
          setLocalStorage({
            CartId: rawCartId,
          });
          if (this.setTimeout) {
            window.clearTimeout(this.setTimeout);
          }
          that.showSku = false;
        })
        .then(() => {
          if (this.setTimeout) {
            window.clearTimeout(this.setTimeout);
          }
          setTimeout(() => {
            this.$router.push('/order/checkout'); //等待3s跳转保证setLocalStorage成功并且有值
          }, 1000);
        })
        .catch((res) => {
          Toast(res.data.errmsg);
        });
    },
    handleShowGallery() {
      this.showGallery = !this.showGallery;
    },
  },
  components: {
    [Popup.name]: Popup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Toast.name]: Toast,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionButton.name]: GoodsActionButton,
    [GoodsActionIcon.name]: GoodsActionIcon,
    //[popupProps.name]: popupProps,
    [Divider.name]: Divider,
    [Dialog.Component.name]: Dialog.Component,
    [Icon.name]: Icon,
    [Image.name]: Image,
  },
};
</script>
<style lang='scss' scoped>
.fozan {
  background: #f7f8fa;
}
.zqan {
  color: #ee0a24;
  background: #fde7ea;
}

// 加号
.addright {
  position: relative;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  color: #323233;
  vertical-align: middle;
  background-color: #f2f3f5;
  border: 0;
  cursor: pointer;
}
.addright::before {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: currentColor;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  content: '';
  width: 50%;
  height: 1px;
}
.addright::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: currentColor;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  content: '';
  width: 1px;
  height: 50%;
}
// 计数器
.stepper {
  box-sizing: border-box;
  width: 32px;
  height: 28px;
  margin: 0 2px;
  padding: 0;
  color: #323233;
  font-size: 14px;
  line-height: normal;
  text-align: center;
  vertical-align: middle;
  background-color: #f2f3f5;
  border: 0;
  border-width: 1px 0;
  border-radius: 0;
  -webkit-appearance: none;
}
// 减号
.deft {
  position: relative;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  color: #323233;
  vertical-align: middle;
  background-color: #f2f3f5;
  border: 0;
  cursor: pointer;
}
.deft::before {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: currentColor;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  content: '';
  width: 50%;
  height: 1px;
}

// 购物车样式
.tocard {
  padding: 10px 0;
  color: #fff;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-image: linear-gradient(to right, #ffca1e, #ff8a17);
}
.buynow {
  padding: 10px 0;
  color: #fff;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: linear-gradient(to right, #ff5f34, #ef1125);
}

/deep/.van-cell__title {
  flex: 1;
}
/deep/.van-cell__value {
  text-align: left;
  flex: 6;
}
.fadetai {
  .detailp {
    /deep/ p {
      margin: 0;
      img {
        width: 100%;
      }
    }
  }
}

.app-container {
  // padding-bottom: 0px;
  background: white;
  overflow-x: hidden;

  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    color: #fff;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }

  > .raw-name {
    margin: -10px 0 15px 16px;
    width: 96%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    > span {
      font-weight: bold;
      font-size: 16px;
      width: 90%;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  > .raw-price {
    display: flex;
    margin: 10px 0 5px 16px;

    > div {
      // >span {
      //   color: red;
      // }
      margin: 0px 0 10px 0;

      > span {
        color: red;
        font-size: 14px;

        > span {
          font-size: 20px;
          font-weight: bolder;
        }
      }
    }

    > nav {
      flex: 1;
      padding-left: 16px;
      padding-top: 5px;

      > a {
        border: 1px solid #71c5fa;
        color: #71c5fa;
        padding: 1px 2.5px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        //padding: 0 6px 2px 6px;
        font-size: 11px;
      }

      > a:nth-of-type(2) {
        margin: 0 auto 0 10px;
      }
    }
  }

  > .raw-descripition {
    margin: -10px 0 10px 16px;
    color: hsl(0, 0, 80);
    font-size: 13px;
  }

  > .raw-provide {
    font-size: 14px;
    //background: #eeeeee;
    // padding: 0px 10px 10px 5px;

    > .top {
      height: 108px;
      padding: 10px 0;
      display: flex;

      > .left {
        border-radius: 4px;
        width: 60px;
        margin: 10px;
        box-sizing: border-box;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-origin: content-box;
      }

      > .right {
        flex: 1;
        display: flex;
        flex-direction: column;

        > li {
          flex: 1;
          display: flex;
          align-items: center;
        }

        > .right-bottom {
          > span:nth-of-type(2) {
            margin: 0 auto;
          }
        }
      }
    }

    > .bottom {
      display: flex;
      margin-top: 2px;

      > li {
        flex: 1;
        display: flex;
        justify-content: center;
        height: 30px;

        .van-icon {
          border: 1px solid;
          padding: 0 10px;
          border-radius: 15px;
          //background: hsl(0, 0, 85);
          display: flex;
          align-items: center;

          > span {
            margin-left: 5px;
            transform: translateY(-2px);
          }
        }
      }
    }
  }

  > .raw-detail {
    text-align: center;
    margin-top: 0px;
  }
}
</style>
